<template>
	<view>
		<view class="login">
			<!-- 			<view class="logo_img"
				style="width: 587rpx;height: 267rpx;font-size: 65rpx;;color: #ffffff;font-family: STHupo;display: flex;flex-direction: column;justify-content: center;">
				<view style="margin-bottom: 15rpx;">随时随地来租机</view>
				<view>汇租机机秒通过</view>
			</view> -->
			<image src="/static/logo.png" mode="widthFix" style="width: 30%;margin: 15% auto;border-radius: 30rpx;">
			</image>
			<image src="/static/tenant/huanying.png" mode="aspectFit"
				style="width: 700rpx;height: 110rpx;margin: 0 auto;"></image>
			<view class="login_top">
				<view class="namePhone">
					<view class="name">
						<u-image class="icon" src="@/static/tenant/phone1.png" mode="aspectFit"></u-image>
						<input style="font-size: 28rpx" v-model="phone" type="number" @input="userTelInput()"
							placeholder="请输入手机号码" />
					</view>
					<view class="phone" style="margin: 40rpx 0;" v-if="randCodeImage">
						<u-image class="icon" src="@/static/tenant/image.png" mode="aspectFit"></u-image>
						<view class="phone_number">
							<input style="font-size: 28rpx" v-model="imageYzm" maxlength="4" placeholder="请输入图片验证码" />
							<image :src="randCodeImage" mode="widthFix" @click="getImageYzm"
								style="width: 150rpx;margin-left: auto;">
							</image>
						</view>
					</view>
					<view class="phone" :style="{margin:!randCodeImage?'40rpx 0' : 0}">
						<u-image class="icon" src="@/static/tenant/psd1.png" mode="aspectFit"></u-image>
						<view class="phone_number">
							<input style="font-size: 28rpx" v-model="yzm" type="number" maxlength="6"
								placeholder="请输入手机验证码" />
							<text class="yam_num" @click="get_code">{{ yzm_text }}</text>
						</view>
					</view>
					<view class="ysxy">
						<u-checkbox shape="circle" @change="checkboxChange" v-model="check_stu"
							active-color="#0088cc">我同意本站</u-checkbox>
						<text @click="open_url1(1)" class="b">《注册协议》</text>
						和
						<text @click="open_url1(2)" class="b">《隐私协议》</text>
					</view>
				</view>
				<button class="sub_login" @click="sub_login"><text class="inner_text">立即登录/注册</text></button>
			</view>
		</view>
		<!-- 滑块验证组件 -->
		<sliderHandVue ref="sliderComponent" :show="isShowSliderVerify"
			@sliderVerifySuccessHandle="sliderVerifySuccessHandle" @sliderStaIsFalse="sliderStaIsFalse">
		</sliderHandVue>
	</view>
</template>
<script>
	const CryptoJS = require('crypto-js');
	import sliderHandVue from '../sliderHand/sliderHand.vue';
	import {
		request,
		saveUserId,
		saveZWZUserDetail
	} from '@/utils';
	import {
		APP_APPID
	} from '../../utils/constant';
	export default {
		data() {
			return {
				isShowSliderVerify: false,
				yzm_text: '获取验证码',
				yzm_text_ing: false,
				yzm_daojishi: 0,
				check_stu: false,
				phone: '',
				yzm: '',
				imageYzm: '',
				userDetail: '',
				codeKey: '',
				codeTime: '',
				rentchannelid: '',
				APP_APPID: APP_APPID,
				isDownloadApp: 1,
				randCodeImage: '', //图片验证码
			};
		},
		components: {
			sliderHandVue
		},
		onLoad(e) {
			if (!!e.pid) {
				uni.setStorageSync('pid', e.pid);
				this.getIsDownloadApp();
			}
			this.rentchannelid = e.pid;
		},
		methods: {
			sliderStaIsFalse(val) {
				console.log('要关闭弹窗吗', val);
				this.isShowSliderVerify = val
			},
			sliderVerifySuccessHandle(val) {
				console.log('回传到父组件的数据', val.left, val.sleft);
				this.getVerificationCode(val.left.toString(), val.sleft.toString())
			},
			//滑块数据后端验证传输数据进行加密
			slideDataRencryption(content) {
				// 密钥
				const secretKey = 'FA08438E01A27F2EE9B7B48D25E34389';
				// 初始向量（IV），必须为128位或256位
				const iv = '3c28c1bef9e73000';
				// let content = '123'
				return CryptoJS.AES.encrypt(content, CryptoJS.enc.Utf8.parse(secretKey), {
					iv: CryptoJS.enc.Utf8.parse(iv),
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				}).toString();
			},
			//新滑块验证获取手机验证码
			getVerificationCode(left, sleft) {
				var that = this;
				let newLeft = that.slideDataRencryption(left)
				let newSleft = that.slideDataRencryption(sleft)
				console.log('传到父组件的连个left', newLeft, newSleft);
				that.$request(
					'/member/mall/aliPay/user/sendSmsCodeAndCheck', {
						mobile: that.phone,
						left: newLeft,
						sleft: newSleft
					},
					'GET',
					false
				).then((res) => {
					if (res.success || res.businessSuccess) {
						that.isShowSliderVerify = false
						that.codeKey = res.data.codeKey;
						that.codeTime = res.data.codeTime;
						uni.showToast({
							icon: 'none',
							title: '验证码发送成功，请注意查收!',
							duration: 2000
						});
						that.yzm_text_ing = true;
						that.yzm_daojishi = 120; //倒计时120秒
						that.yzm_text = that.yzm_daojishi + 'S';
						that.setInterval = setInterval(function() {
							that.yzm_daojishi = that.yzm_daojishi - 1; //时间减少
							that.yzm_text = that.yzm_daojishi + 'S';
							if (that.yzm_daojishi <= 0) {
								that.yzm_text = '重新获取';
								that.yzm_daojishi = 0;
								that.yzm_text_ing = false;
								clearInterval(that.setInterval);
							}
						}, 1000);
					} else {
						that.$refs.sliderComponent.refresh()
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					}
				})
			},
			//监测手机号的输入（输入11位后出现图片验证码）
			userTelInput() {
				console.log('--监测手机号的输入--', this.phone);
				if (this.phone.length == 11) {
					// this.getImageYzm()
				}
			},
			//在输入手机号之后，获取图片验证码
			getImageYzm() {
				if (this.phone.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号输入错误！'
					});
					return false;
				}
				this.$request(`member/mall/aliPay/user/randomImage`, {
					mobile: this.phone
				}, 'get', false, true).then((
					res) => {
					if (res.businessSuccess || res.success) {
						this.randCodeImage = res.data;
					}
				});
			},
			getIsDownloadApp() {
				request('/member/mall/aliPay/user/isDownloadApp', {}, 'POST', false).then((res) => {
					this.isDownloadApp = res.data;
				});
			},

			open_url1(type) {
				this.$onTo(`pagesOther/xieyi/loginXy?type=` + type);
			},
			get_code() {
				var that = this;
				var myreg = /^(((1[0-9]{2}))+\d{8})$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误'
					});
					return false;
				}
				this.isShowSliderVerify = true
				return


				var that = this;
				var myreg = /^(((1[0-9]{2}))+\d{8})$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误'
					});
					return false;
				}
				if (this.imageYzm.length != 4) {
					uni.showToast({
						icon: 'none',
						title: '图片验证码错误'
					});
					return false;
				}
				if (that.yzm_text_ing === true) {
					//倒计时中
					return false;
				}
				that.yzm_text_ing = true;
				that.yzm_daojishi = 120; //倒计时30秒
				that.yzm_text = that.yzm_daojishi + 'S';
				request(
					'/member/mall/aliPay/user/sendSmsCode', {
						mobile: that.phone,
						captcha: that.imageYzm
					},
					'GET',
					false
				).then((res) => {
					console.log('发送短信====', res);
					if (res.businessSuccess || res.success) {
						that.codeKey = res.data.codeKey;
						that.codeTime = res.data.codeTime;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
				that.setInterval = setInterval(function() {
					that.yzm_daojishi = that.yzm_daojishi - 1; //时间减少
					that.yzm_text = that.yzm_daojishi + 'S';

					if (that.yzm_daojishi <= 0) {
						that.yzm_text = '重新获取';
						that.yzm_daojishi = 0;
						that.yzm_text_ing = false;
						clearInterval(that.setInterval); //
					}
				}, 1000);
			},
			sub_login(e) {
				if (this.phone == '13991373115') {
					uni.showToast({
						icon: 'none',
						title: '登录出错'
					});
					return
				}
				var that = this;
				if (this.check_stu == false) {
					uni.showToast({
						icon: 'none',
						title: '请同意协议'
					});
					return false;
				}
				var myreg = /^(((1[0-9]{2}))+\d{8})$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号错误'
					});
					return false;
				}
				// if (this.imageYzm.length != 4) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '图片验证码错误'
				// 	});
				// 	return false;
				// }
				if (this.yzm.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '手机验证码错误'
					});
					return false;
				}
				var postData = {};
				postData.phone = this.phone;
				postData.yzm = this.yzm;
				request(
					'member/mall/aliPay/user/smsLogin', {
						codeKey: that.codeKey,
						codeTime: that.codeTime,
						smsCode: that.yzm,
						telephone: that.phone,
						captcha: that.imageYzm
					},
					'POST',
					false
				).then((res) => {
					console.log(1, res);
					if (res.data.stu == false) {
						//登陆失败
						uni.showToast({
							icon: 'none',
							title: res.data.text
						});
						return false;
					}

					if (res.data.errorCode == '-1') {
						uni.showToast({
							icon: 'none',
							title: res.data.errorMessage
						});
						return false;
					}

					that.userDetail = res.data;
					console.log('登录返回值================', res);
					if (that.userDetail.uid) {
						saveUserId(that.userDetail.uid);
					}
					saveUserId(that.userDetail.uid);
					saveZWZUserDetail(that.userDetail);
					if (this.APP_APPID == 'KSG1711097863349' && this.isDownloadApp == 1) {
						uni.reLaunch({
							//跳转到首页
							url: '/pages/download-rich/download-rich'
						});
					} else {
						uni.reLaunch({
							//跳转到首页
							url: '/pages/index/index'
						});
					}
					// uni.reLaunch({
					//     //跳转到首页
					//     url: '/pages/index/index'
					// });
				});
			},
			checkboxChange(check) {
				this.check_stu = check;
			}
		}
	};
</script>

<style lang="scss" scoped>
	uni-app {
		margin: 0;
		padding: 0;
	}

	.login {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: linear-gradient(180deg, #00a3e2 0%, #006db8 100%);

		&::after {
			// content: '';
			// width: 100%;
			// height: 25%;
			// position: absolute;
			// bottom: 0;
			// left: 0;
			// right: 0;
			// background: url(@/static/tenant/register_bottom_bkg.png) no-repeat;
			// background-size: 100%;
			// background-position: center 100%;
		}

		.logo_img {
			width: 80% !important;
			text-align: center;
			z-index: 1;
			margin: 8vh auto 3vh;
			letter-spacing: 0.1em;
		}

		.login_top {
			box-sizing: border-box;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			z-index: 5;
			margin: 0 80rpx;

			.namePhone {
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				width: 100%;
				padding: 90rpx 40rpx 90rpx;
				border-radius: 30rpx;
				// background-color: #fff;

				/deep/.input-placeholder {
					font-size: 28rpx;
					color: #b3b3b3;
				}

				.name,
				.phone {
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					background-color: #f5f5f5;
					border-radius: 100px;
					overflow: hidden;

					/deep/uni-input {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 32rpx !important;
						flex: 1;
					}

					.icon {
						margin-right: 10rpx;
						width: 40rpx !important;
						height: 40rpx !important;
					}
				}

				.phone {

					// margin: 40rpx 0 0;
					.phone_number {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex: 1;
					}

					.yam_num {
						font-size: 20rpx;
						text-align: center;
						color: #fff;
						border-radius: 20rpx;
						height: 45rpx;
						line-height: 45rpx;
						padding: 0 20rpx;
						margin-left: auto;
						background-image: linear-gradient(180deg, #0088cc 0%, #0088cc 100%);
					}
				}

				.ysxy {
					padding: 40rpx 0 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					text-align: center;
					color: #fff;

					.b {
						color: #004c8b;
					}

					/deep/.u-checkbox__label {
						font-size: 24rpx;
						margin-right: 0;
						color: #fff;
					}

					/deep/.u-checkbox__icon-wrap {
						width: 26rpx !important;
						height: 26rpx !important;
					}
				}
			}

			.sub_login {
				letter-spacing: 0.05em;
				font-size: 36rpx;
				width: 100%;
				margin: 60rpx 0 0;
				color: #0088cc;
				font-weight: bold;
				border-radius: 30px;
				z-index: 5;
				height: 80rpx;
				line-height: 80rpx;

				&::after {
					border: none;
				}
			}
		}
	}
</style>